<#include "/include/macros.ftl">
<@header></@header>

<div class="layui-collapse" lay-filter="tablePanel">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">查询条件</h2>
    <div class="layui-colla-content layui-show">
      <div class="layui-main">
        <form class="layui-form " action="">
			<div class="layui-form-item">
			     <div class="layui-inline">
					    <label class="layui-form-label">搜索</label>
					    <div class="layui-input-inline">
					      <input name="keywords" id="keywords" lay-verify="title" autocomplete="off" placeholder="请输入搜索内容" class="layui-input" type="text">
					    </div>
			     </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">角色</label>
			      <div class="layui-input-inline">
			        <select name="quiz">
			          <option value="">请选择</option>
			          <optgroup label="角色1">
			            <option value="1">1</option>
			          </optgroup>
			          <optgroup label="角色2">
			            <option value="2">2</option>
			            <option value="3">3</option>
			          </optgroup>
			        </select>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">性别</label>
			      <div class="layui-input-inline">
			        <select name="modules" lay-search="">
			          <option value="">直接选择或搜索选择</option>
			          <option value="1">男</option>
			          <option value="2">女</option>
			        </select>
			      </div>
			    </div>
			  </div>
			  
			   <div class="layui-form-item" style="text-align:center">
			    <div class="layui-input-block ">
			      <button class="layui-btn" lay-submit="" data-type="reload" id="searchBtn" lay-filter="search">查询</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
			</form>
			</div>
        <!-- <blockquote class="layui-elem-quote">
            <div class="tablebheader">
               		 用户名:
                <div class="layui-inline">
                    <input name="id" class="layui-input" id="keyWord" autocomplete="off" placeholder="请输入用户名">
                </div>
			                    邮箱：
			    <div class="layui-inline">
			      <input class="layui-input" height="20px" id="email" autocomplete="off">
			    </div>
                 <button class="select-on layui-btn layui-btn-sm" data-type="find"><i class="layui-icon"></i>查询</button>
    			<button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;" data-type="reload"><i class="layui-icon"></i>刷新</button>
            </div>
        </blockquote> -->
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">查询结果</h2>
    <div class="layui-colla-content layui-show">
 		 <table class="layui-hide" id="tableid" lay-filter="tablefilter"></table>
    </div>
  </div>
</div>

<script>
layui.use(['element', 'layer'], function(){
  var element = layui.element;
  var layer = layui.layer;
  
  //监听折叠
  element.on('collapse(tableid)', function(data){
    layer.msg('展开状态：'+ data.show);
  });
});
</script>
    <script type="text/html" id="switchState">
        <input type="checkbox" name="statusEnum" value="{{d.username}}" lay-skin="switch" lay-text="正常|异常" lay-filter="stateDemo" {{ d.username == "root" ? 'checked' : '' }}>
    </script>
    
    <script type="text/html" id="toolbarTop">
  	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
    	<!--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选取的数据</button>
    	<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    	<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
<!--
    <@shiro.hasPermission name="user:add">
    <button class="layui-btn layui-btn-sm" data-type="update">
      <i class="layui-icon">&#xe642;</i>编辑
    </button>
    </@shiro.hasPermission>
	<@shiro.hasPermission name="user:add">
    <button class="layui-btn layui-btn-sm" data-type="detail">
      <i class="layui-icon">&#xe605;</i>查看
    </button>
	</@shiro.hasPermission>
    <@shiro.hasPermission name="user:add">
    <button class="layui-btn layui-btn-sm" data-type="changePwd">
      <i class="layui-icon">&#xe605;</i>修改密码
    </button>
    </@shiro.hasPermission>
-->
  	</div>
	</script>

    <script type="text/html" id="barOperate">
		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe605;</i>查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">百搭</a>
		<a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="detail">默认</a>
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">原始</a>
		<a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="detail">禁用</a>-->
    </script>

    <script>
        layui.use(['form', 'layedit', 'laydate','table'], function(){   //这个代表引用layui文件modules里面的table.js,所以检查modules是否有table.js
            var table = layui.table,form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
            //重载的时候就是tabls.reload();
            var tabls=table.render({
                elem: '#tableid'    //对应table里面的id
                ,method:"post"
                ,height: 'full-200'
                ,skin: 'row'
                ,even: true
                ,cellMinWidth: 50 //全局定义常规单元格的最小宽度
                ,toolbar: '#toolbarTop'
                ,url:"/user/list" //请求数据的地址
                ,cols: [[
                    {checkbox: true}
                    ,{field:'id', title: 'ID', sort: true}   //后台对应数据的参数名
                    ,{field:'username',  title: '用户名'}
                    ,{field:'nickname',  title: '昵称'}
                    ,{field:'email',  title: '邮箱'}
                    ,{field:'mobile',  title: '手机号'}
                    ,{field:'userType',  title: '用户类型'}
                    ,{field:'statusEnum', title: '用户状态', templet: '#switchState', unresize: true}
                    ,{field:'lastLoginTime', minWidth:300, title: '创建时间', sort: true}
                    ,{field:'loginCount', title: '登录次数'}
                    ,{field:'operate', title: '操作',align:'center',minWidth:250, toolbar: '#barOperate',fixed: 'right'}
                ]]
                ,id: 'tabmessage'
                ,page: true
                /* ,response: {
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    ,statusCode: 0 //规定成功的状态码，默认：0
                    ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                    ,countName: 'total' //规定数据总数的字段名称，默认：count
                    ,dataName: 'rows' //规定数据列表的字段名称，默认：data
                }  */
            });
            //监听表格复选框选择
            // table.on('checkbox(tablefilter)', function(obj) {
            //     console.log(obj)
            // });
            
             //监听性别操作
		  form.on('switch(stateDemo)', function(obj){
		    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		  });
		  form.on('submit(search)', function(obj){
			    debugger;
			    //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
			    return false;
		   });
             
		  //头工具栏事件
		   //头工具栏事件
		  table.on('toolbar(tablefilter)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'insert':
		    	  layer.open({
                      type: 2,
                      title: '新增',
                      shadeClose: false,
                      shade: 0,
                      area: ['50%','70%'],
                      content: '/users/add',
			    	  yes: function (index, layero) {
			    		//得到iframe页的窗口对象（2种方式）-----------推荐使用第二种方式获得对象
				    		var iframeWin1 = window[layero.find('iframe')[0]['name']];
				    		var iframeWin2 = window["layui-layer-iframe" + index];
		
				    		//对应调用子页面的方法（2种方式）
				    		var ids1 = iframeWin1.SunPage();
				    		var idd2 = iframeWin2.SunPage();
		
				    		//获取子页面的值
				    		var res = iframeWin1.callbackdata();
				    		alert(res.resut4);　　//这里从子页面传过来了4个值，这里只取第四个值 callbackdata（）来自子页面
			    		},
			    		cancel: function (index, layero) {
			    		},
			    		end: function () {
			    			location.reload();
			    		}
                  });
		    	  break;
		      case 'getCheckData':
		    	  var data = checkStatus.data;
		        layer.alert(JSON.stringify(data));
		      break;
		      case 'getCheckLength':
		        var data = checkStatus.data;
		        layer.msg('选中了：'+ data.length + ' 个');
		      break;
		      case 'isAll':
		        layer.msg(checkStatus.isAll ? '全选': '未全选');
		      break;
		    };
		  });
		  
            //监听工具条
            table.on('tool(tablefilter)', function(obj){ 
                var data = obj.data,layEvent = obj.event; 
                if(layEvent === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); 
                        layer.close(index);
                        $.ajax({
                            url: "/user/remove",
                            //dataType: "text",
                            //contentType: "application/json",
                            data: {'ids': data.id},
                            type: "post",
                            success: function () {
                                layer.msg("删除成功", {
                                    icon: 6
                                });
                                table.reload('tabmessage', {
                                    url:"/user/list"
                                });
                            },
                            error: function () {
                                layer.msg("删除失败", {
                                    icon: 5
                                });
                            }
                        });
                    });
                } else if(layEvent === 'edit'){
                    //layer.msg('编辑操作');
                    layer.open({
                        type: 2,
                        title: '编辑',
                        shadeClose: false,
                        shade: 0,
                        area: ['50%','70%'],
                        content: '/users/updateuser/'+data.id,
                        end: function () {
                        	location.reload();
                        }
                    });
                }else if(layEvent === 'getCheckData'){
                	layer.alert(1);
                }
            });
            var $ = layui.$, active = {
                find: function(){
                    var keywords = $('#keywords');
                    layer.msg("模糊查询"+keywords.val());
                    table.reload('tabmessage', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                        	keywords: keywords.val()
                        }
                        ,url:"/user/get"
                    });
                },
                increase: function () {
                    layer.msg("increase");
                    //window.location.href='/user/addUser';
                    layer.open({
                      type: 2,
                      title: '新增',
                      shadeClose: false,
                      shade: 0,
                      area: ['50%','70%'],
                      content: '/users/add',
                      end: function () {
                    	  location.reload();
                      }
                  });
                    
                /*     $.ajax({
                        type: "get",
                        url: "/users/add",
                        data: {  },
                        beforeSend: function () {

                        },
                        success: function (data) {
                            window.location.href='/users/add';
                        }
                    }) */
                },
                reload: function(){
      		      var demoReload = $('#keywords');
      		      debugger;
      		      //执行重载
      		      table.reload('tabmessage', {
      		        page: {
      		          curr: 1 //重新从第 1 页开始
      		        }
      		        ,where: {
      		          keywords: demoReload.val()
      		        }
      		      });
      		    },
                volumeRemove: function () {
                	debugger;
                    var checkStatus = table.checkStatus('tabmessage'),
                            data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    var dellist="";
                    for(var i=0;i<data.length;i++){
                        dellist+=data[i]['id'];
                        if(i<data.length-1){
                            dellist+=",";
                        }
                    }
                    $.ajax({
                        type: "delete",
                        url: "/users/delete/"+dellist,
                        data: {  },
                        success: function (data) {
                            //执行重载
                            table.reload('tabmessage', {
                                url:"/users"
                            });
                        }
                    })
                }
            };
            $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
<!--/添加用户弹框-->
<@footer>
   
</@footer>
